<template>
	<div class="hello">
		<div class="root">
			<div class="song">
				<div class="song-bg">
				</div>
				<div class="song-body">
					<div class="song-warp">
						<div class="song-disc">
							<div class="song-turn" @click="music">
								<div class="song-rollwarp">
									<div class="song-img zhuan" @click="play1" ref="zhuan">
										<van-image :src="require('../assets/imgW/wsong2.jpg')" />
									</div>
								</div>
							</div>
							<div v-show='isshow' class="Play"><span class="song-playbtn" @click="music"></span>
								<audio id="audios" src="http://music.163.com/song/media/outer/url?id=504924216.mp3" ref="audios"></audio>
							</div>
						</div>
					</div>
					<div style="position: relative;">
						<div class="song-info">
							<h2 class="song-h2">
								<span class="song-name">谁(Live版)</span>
								<span class="song-gap">-</span>
								<b class="song-autr">廖俊涛</b>
							</h2>
							<div class="song-lrc">
								<div class="song-scroll" style="height: 1.33262rem;">
									<div class="song-iner">
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem1" v-if="show">作词 : 廖俊涛</p>
										</transition>
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem2" v-if="show">编曲：廖俊涛 黄竣琮＠TYZ</p>
										</transition>
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem3" v-if="show">并没要求有谁能体会</p>
										</transition>
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem4" v-if="show">更别善做慈悲</p>
										</transition>
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem5" v-if="show">同情才不会给我安慰</p>
										</transition>
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem6" v-if="show">反而让我流泪</p>
										</transition>
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem7" v-if="show">走得越近心越像刺猬</p>
										</transition>
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem8" v-if="show">从未卸下防备</p>
										</transition>
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem9" v-if="show">不如早就把我向外推备</p>
										</transition>
										<transition name="custom-classes-transition"
										    leave-active-class="animated bounceOutRight">
										<p class="song-lritem10" v-if="show">彻底粉碎</p>
										</transition>
										
								
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="link">
						<div class="musicstreet">
							<router-link to="/Sing">
							<van-image width="2.66667rem" height=".6666667rem" :src="require('../assets/imgW/musicStreet.png')" />
							</router-link>
						</div>
					</div>
					<div class="giude">
						<i class="arr"></i>
					</div>
				</div>
				<div class="ft" style="position: fixed; left: 0;bottom: 0;z-index: 150;">
					<div class="footer-warp">
						<div style="flex: 1 1 12px; position: relative;">
							<button>打开</button>
						</div>
						<span class="btn">下载</span>
					</div>
				</div>
			</div>
		</div>


		<div style="margin-left: .3rem; position: relative; z-index: 100;">
			<h4 class="cmt_title" style="padding-bottom: .1rem;">喜欢这首歌的人也喜欢听</h4>
			<ul style="height: 7.8rem;margin-left: .2rem;margin-right: .2rem">
				<li v-for="article in articles" style="height: 1.5rem; text-align: left;">
					<span class="cover" style="width: 1.066rem;height:1.066rem;background: url(../assets/imgW/tx1.png) no-repeat; background-size: 100% auto; display: inline-block;">
						<van-image width=".66667rem" height=".6666667rem" :src="require('../assets/imgW/tx2.jpg')" /></span>
					<a v-bind:href="article.url" style="color:#fff;font-size:.426439rem;">
						{{article.title}}
					</a>
					<p style="color:hsla(0,0%,100%,.6);"><span style="color:#D43C33;border: .01rem solid #D43C33;font-size:.1rem;">SQ</span>
						{{article.content}}</p>
					<span style="float:right;margin-top: -1rem;">
						<van-icon name="play-circle-o" color="hsla(0,0%,100%,.6)" size=".8rem" />
					</span>
				</li>
			</ul>
		</div>
		<h4 class="cmt_title">精彩评论</h4>
		<div style="">
			<ul style="height: 17.2rem;position: relative; z-index: 100;">
				<li v-for="comments in comment" style="height: 3.rem;padding-top: 0.2rem;display: flex;flex-direction: row; text-align: left;">
					<a v-bind:href="comments.url" style="text-decoration: none;margin: .2rem .3rem 0 .3rem;position: relative;display: inline-block;flex: none;">
						<img :src="comments.img" alt="" style="display: inline-block;border-radius: 50%;width: .8rem;height: .8rem;">
					</a>
					<div style="padding-bottom: .2rem;padding-right: .2rem;position: relative;border-bottom: 1px solid rgba(0,0,0,.1);">
						<a v-bind:href="comments.url" style="text-decoration: none;font-size: 14px;color: hsla(0,0%,100%,.7);line-height: 20px;overflow: hidden;white-space: nowrap;">
							{{comments.name}}
						</a>
						<a v-bind:href="comments.url" style="text-decoration: none;display: block;color: hsla(0,0%,100%,.3);margin-bottom: .3rem;">
							{{comments.title}}
						</a>
						<p><span style="font-size: .42rem;color:#fff;">{{comments.content}}</span></p>
						<div style="position: absolute;right:.4rem;top: 1.2rem;">
							<span style="float:right;margin-top: -1rem;color: #fff;font-size:.3rem;position: relative;">
								<span style="position: absolute;top: .1rem;right: .5rem;"> 216 </span>&nbsp;
								<van-icon name="good-job-o" size=".5rem" />
							</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
		
		
		
		
		<div class="more-app">
			<span class="box">打开云音乐查看更多精彩评论</span>
		</div>
		
		
	</div>
</template>

<script scoped>
	export default {
		name: 'musicplay',

		props: {
			msg: String,

		},
		data() {
			return {
				isactive: true,
				isshow: true,
				info: true,
				isplay: true,
				show: true,
				
				
				comment:[
							{
								img:require('../assets/imgW/pinglun1.png'),
								"name": "小静在角落爱你",
								"title": "2020年8月12日",
								"url": "https://www.runoob.com/css3/css3-tutorial.html",
								"content": "“你不是睡着了吗?特别关心的声音稍微有点大”"
							},
							{
								img:require('../assets/imgW/pinglun2.jpg'),
								"name": "長野柔",
								"title": "2020年8月12日",
								"url": "https://www.runoob.com/css3/css3-tutorial.html",
								"content": "有人把错误归结于你的敏感，有人会保护好你的敏感。"
							},
							{
								img:require('../assets/imgW/pinglun3.jpg'),
								"name": "吐泡泡_Q",
								"title": "2020年8月14日",
								"url": "https://www.runoob.com/css3/css3-tutorial.html",
								"content": "他如果要喜欢我 早就把身边七七八八的关系清理干净 一点醋别让我吃 我不仅懒得跟她们挤 我还懒得跟他说。"
							},
							{
								img:require('../assets/imgW/pinglun4.jpg'),
								"name": "把爱意珍藏syh",
								"title": "2020年8月13日",
								"url": "https://www.runoob.com/css3/css3-tutorial.html",
								"content": "希望你记住我的好或者记住我就好.爱你的人不会给别人留位置。"
							},
							{
								img:require('../assets/imgW/pinglun5.jpg'),
								"name": "打大大怪兽",
								"title": "2020年10月23日",
								"url": "https://www.runoob.com/css3/css3-tutorial.html",
								"content": "有人把错误归结于你的敏感，有人会保护好你的敏感。"
							},
							{
								img:require('../assets/imgW/pinglun6.jpg'),
								"name": "長野柔",
								"title": "2020年10月12日",
								"url": "https://www.runoob.com/css3/css3-tutorial.html",
								"content": "拉拉扯扯几年 互相都谈过别的恋爱 但是 每隔一段时间 都会联系 你说这是爱还是折磨 其实 我也说不上来"
							},
							{
								img:require('../assets/imgW/pinglun7.jpg'),
								"name": "我不是云长呐",
								"title": "2020年10月17日",
								"url": "https://www.runoob.com/css3/css3-tutorial.html",
								"content": "都怪我的演技太高， 你只看到了我的满心欢喜， 看不到我的欲言又止"
							}
						],
				texts: ['推荐音乐', '热歌榜', '搜索'],
				articles: [{
						"title": "失眠飞行",
						"url": "https://www.runoob.com/css/css-tutorial.html",
						"content": "一条小团团OvO - 失眠飞行"
					},
					{
						"title": "Never(狼殿下战爱版预告宣传曲)",
						"url": "https://www.runoob.com/html/html-tutorial.html",
						"content": "颜俊佳 - Never(狼殿下战爱版预告宣传曲)"
					},
					{
						"title": "天性使然",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "曾莉红 - 天性使然"
					},
					{
						"title": "耗子尾汁",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "马保国 - 耗子尾汁"
					},
					{
						"title": "Hey Boy",
						"url": "https://www.runoob.com/sql/sql-tutorial.html",
						"content": "Sia- Hey Boy"
					},

				],


			}
		},


		methods: {
			play() {
				(this.isactive = !this.isactive) && (this.isshow = !this.isshow);
			},
			play1() {
				(this.isactive = !this.isactive) && (this.isshow = !this.isshow);
			},
			music() {
				var oPlay = this.$refs.zhuan;
				var audios = this.$refs.audios;
				this.isshow = !this.isshow;
				this.show = !this.show;
				if (audios.paused) {
					audios.play();
					oPlay.style.animationPlayState = "running";
				} else {
					audios.pause();
					oPlay.style.animationPlayState = "paused";
				}
			}
		},
		mounted() {
			var oPlay = this.$refs.zhuan;
			oPlay.style.animationPlayState = "paused";
		}
	}
</script>


<style scoped>
	.zhuan {
		animation: circling 20s linear infinite;
	}

	.show {
		display: none;
	}

	@keyframes circling {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}


 /*深度理解
            *整个动画1.2s完成。
            *这里1.2s要移动84的像素，这1.2s要有1步走完steps(1)，每步是平均下来是1.2s，
            *每步比上一步多走了12px的位置，这个走是瞬间走到的。
            *infinite表示无限循环
*/
	.arr {
		animation: shining 1.2s steps(1) infinite;
	}

	@keyframes shining {
		0% {
			background-position: 0 0;
		}

		15% {
			background-position: 0 -12px;
		}

		30% {
			background-position: 0 -24px;
		}

		45% {
			background-position: 0 -36px;
		}

		60% {
			background-position: 0 -48px;
		}

		75% {
			background-position: 0 -60px;
		}

		90% {
			background-position: 0 -72px;
		}

		100% {
			background-position: 0 -84px;
		}

	}

	.cmt_title {
		position: relative;
		z-index: 100;
		padding: 0 0 0 .266524rem;
		line-height: .66631rem;
		font-size: .426439rem;
		background-color: rgba(0, 0, 0, 0);
		color: #fff;
		height: .613006rem;
		margin: 0;
		font-weight: 400;
		text-align: left;
	}

	.more-app {
		position: relative;
		z-index: 100;
		padding-left: .266524rem;
		margin-bottom: 1.0661rem;
		padding-top: 3.78465rem;
	}

	.more-app .box {
		display: block;
		border: 1px solid #d8d8d8;
		border-radius: 1.33262rem;
		padding: .266524rem 0;
		font-size: .37313rem;
		color: #fff;
		text-align: center;
		line-height: 1;
		background-color: rgba(0, 0, 0, .12);
		margin-right: .266524rem;
	}

	.root {
		position: relative;
		background-color: #fcfcfd;
		width: 10rem;
		height: 17.7rem;
	}

	.root::before {
		content: " ";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(0, 0, 0, .5);
	}

	.song {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		min-width: 320px;
		overflow: hidden;
	}

	.song .song-bg {
		background: url(../assets/imgW/wsong1.jpg) no-repeat;
		opacity: 1;
		transform: scale(1.5);
		transform-origin: center center;
		filter: blur(0.799rem);
		background-color: #161824;
		background-position: 50%;
		background-size: auto 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100%;
		overflow: hidden;
		z-index: 1;
	}

	.song-body {
		height: 16.178rem;
		position: relative;
		padding-bottom: .32rem;
		box-sizing: border-box;
	}

	.song-warp {
		padding-top: 1.86567rem;
	}

	.song-disc {
		width: 7.889rem;
		height: 7.889rem;
		position: relative;
		margin: 0 auto;
	}

	.song-disc::after {
		content: " ";
		position: absolute;
		width: 2.55863rem;
		height: 3.6534rem;
		top: -1.87rem;
		left: 3.5447rem;
		z-index: 5;
		background: url(../assets/imgW/wgj.png) no-repeat;
		background-size: cover;
	}

	.song-turn {
		width: 100%;
		height: 100%;
	}

	.song-turn::before {
		content: " ";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		background: url(../assets/imgW/guangdie.png) no-repeat;
		background-size: contain;
	}

	.song-rollwarp {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 1;
		width: 4.904rem;
		height: 4.904rem;
		margin: -2.452rem 0 0 -2.452rem;
		transform: matrix(-0.953669, -0.300856, 0.300856, -0.953669, 0, 0);
	}

	.song-rollwarp .song-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
		background: url(../assets/imgW/disc_default.png) no-repeat;
		background-size: contain;
	}

	.song-playbtn {
		width: 1.49254rem;
		height: 1.49254rem;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: url(../assets/imgW/pause.png) no-repeat;
		z-index: 10;
		background-size: contain;
	}

	.song-info {
		padding: 0 .932835rem;
		margin-top: .66631rem;
		position: relative;
		z-index: 20;
	}

	.song-h2 {
		font-size: .479744rem;
		text-align: center;
		line-height: 1.1;
		color: #fefefe;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.song-autr {
		font-size: .426439rem;
		color: hsla(0, 0%, 100%, .6);
		font-weight: 400;
	}

	.song-lrc {
		position: relative;
		margin-top: .373134rem;
	}

	.song-scroll {
		line-height: 1.5;
		font-size: .4264382;
		height: 1.33262rem;
		overflow: hidden;
	}

	.song-lritem1 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:17s;
	}
	.song-lritem2 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:20s;
	}
	.song-lritem3 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:23s;
	}
	.song-lritem4 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:27s;
	}
	.song-lritem5 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:31s;
	}
	.song-lritem6 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:35s;
	}
	.song-lritem7 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:40s;
	}
	.song-lritem8 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:44s;
	}
	.song-lritem9 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:49s;
	}
	.song-lritem10 {
		color: rgb(255, 255, 255);
		padding-bottom: 0.221303rem;
		animation-delay:53s;
	}
	
	

	.song-iner {
		line-height: 1.5;
		text-align: center;
		color: hsla(0, 0%, 100%, .6);
		/* overflow: hidden; */
	}

	.link {
		margin-top: .399786rem;
		display: flex;
		color: hsla(0, 0%, 100%, .6);
		height: .4397654rem;
		line-height: .4397654rem;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 20;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
	}

	.musicstreet {
		border-radius: .692963rem;
		border: 1px solid hsla(0, 0%, 100%, .13);
	}

	.giude {
		position: absolute;
		left: 0;
		right: 0;
		height: .959488rem;
		padding-top: .266524rem;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 10;
		bottom: -.194562rem;

	}

	.giude .arr {
		display: block;
		width: .8795309rem;
		height: .60234rem;
		background-repeat: no-repeat;
		background-size: .46rem auto;
		background: url(../assets/imgW/jiantou.png) no-repeat 0 0;
	}

	.ft {
		position: absolute;
		left: 0;
		right: 0;
		bottom: .266524rem;
		z-index: 100;
	}

	.ft .footer-warp {
		display: flex;
		padding: 0 .266524rem;
		margin: 0 auto;
	}

	.ft .footer-warp button {
		display: block;
		width: 100%;
		height: 1.06609rem;
		line-height: 1.06609rem;
		border: 1px solid rgb(255, 58, 58);
		border-radius: 1.06609rem;
		font-size: .479744rem;
		text-align: center;
		background: transparent;
		color: rgb(255, 58, 58);
	}

	.ft .footer-warp .btn {
		color: #fff;
		background-color: #ff3a3a;
		flex: 1 1 auto;
		width: 1%;
		margin-left: .266524rem;
		border-color: #ff3a3a;
		display: inline-block;
		height: 1.06609rem;
		line-height: 1.06609rem;
		padding: 0 .159914rem;
		border: 1px solid #adadad;
		border-radius: 1.06609rem;
		font-size: .479744rem;
		text-align: center;
		box-sizing: border-box;
	}
</style>
